<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box {
			font-size: 20px;
			color: #4cc134;
			margin: 10px;
			animation: changeshadow 1s ease-in infinite;
			/* 其它浏览器兼容性前缀 */
			-webkit-animation: changeshadow 1s linear infinite;
			-moz-animation: changeshadow 1s linear infinite;
			-ms-animation: changeshadow 1s linear infinite;
			-o-animation: changeshadow 1s linear infinite;
		}

		@keyframes changeshadow {
			0% {
				text-shadow: 0 0 4px #4cc134
			}

			50% {
				text-shadow: 0 0 40px #4cc134
			}

			100% {
				text-shadow: 0 0 4px #4cc134
			}
		}

		/* 添加兼容性前缀 */
		@-webkit-keyframes changeshadow {
			0% {
				text-shadow: 0 0 4px #4cc134
			}

			50% {
				text-shadow: 0 0 40px #4cc134
			}

			100% {
				text-shadow: 0 0 4px #4cc134
			}
		}

		@-moz-keyframes changeshadow {
			0% {
				text-shadow: 0 0 4px #4cc134
			}

			50% {
				text-shadow: 0 0 40px #4cc134
			}

			100% {
				text-shadow: 0 0 4px #4cc134
			}
		}

		@-ms-keyframes changeshadow {
			0% {
				text-shadow: 0 0 4px #4cc134
			}

			50% {
				text-shadow: 0 0 40px #4cc134
			}

			100% {
				text-shadow: 0 0 4px #4cc134
			}
		}

		@-o-keyframes changeshadow {
			0% {
				text-shadow: 0 0 4px #4cc134
			}

			50% {
				text-shadow: 0 0 40px #4cc134
			}

			100% {
				text-shadow: 0 0 4px #4cc134
			}
		}
	</style>
	<body>
		<div class="box">闪烁效果</div>
	</body>
</html>
